<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ipt">
    <script src="./object.js"></script>

    <script>
        // mvvm 是什么？
        // m:model 数据层  v：view 视图层  vm:数据双向绑定  vue

        let obj1 = {};

        let value = '';

        let ipt = document.querySelector('#ipt');

        //1.修改数据驱动视图更新  设置数据的时候，得更新dom，改变视图
        //2.视图更新，得改变数据
        //访问器属性  set  get
        Object.defineProperty(obj1,'name',{
            set(newVal){
                //得更新dom，改变视图
                console.log("设置值");
                ipt.value = newVal;
            },
            get(){
                console.log("获取值");
                return value
            }
        })

        //obj.name = 'sdsdsd'
        //xxxxx
        //obj.name

        ipt.addEventListener('input',(e) => {
            value = e.target.value;
        })

    </script>
</body>
</html>